<template>
  <breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
  <!-- 顶部 -->
  <div class="table-wrapped">
    <!-- 表格顶部 -->
    <div class="table-header">
      <!-- 搜索框 -->
      <div class="search-wrapped">
        <el-input v-model="adminAccount" style="width: 100%" class="w-50 m-2" size="large" placeholder="输入账号进行搜索"
          :prefix-icon="Search" @change="goSearch(adminAccount)" />
      </div>
      <!-- 添加管理员按钮 -->
      <div class="button-wrapped">
        <el-button type="primary" @click="goAddAdmin(1)">添加产品管理员</el-button>
      </div>
    </div>
    <!-- 表格内容 -->
    <div class="table-content">
      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column width="80" type="index" :index="indexMethod" />
        <el-table-column prop="account" label="账号" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="sex" label="性别" />
        <el-table-column prop="department" label="部门" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="update_time" label="更新时间">
          <template #default="{ row }">
            <div>{{ row.update_time?.slice(0, 10) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <div>
              <el-button type="success" @click="goEditAdmin(row.account, row.id)">编辑</el-button>
              <el-button type="danger" @click="goReduceLevel(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页 -->
    <div class="table-footer">
      <el-pagination size="small" background layout="prev, pager, next" :total="totalData"
        :page-size="paginationData.pageSize" :pager-count="paginationData.pagerCount"
        :current-page="paginationData.currentPage" @current-change="goChangePage" />
    </div>
  </div>
  <!-- 增 -->
  <addAdmin ref="addAdminRef" :getFirstPage="getFirstPage" :departmentList="departmentList"></addAdmin>
  <!-- 改 -->
  <editAdmin ref="editAdminRef" :getFirstPage="getFirstPage" :departmentList="departmentList"></editAdmin>
  <!-- 删 -->
  <reduceLevel ref="reduceLevelRef" :getFirstPage="getFirstPage"></reduceLevel>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, provide } from "vue"
import breadCrumb from "../../../components/breadCrumb.vue"
import { Search } from '@element-plus/icons-vue'
import addAdmin from "../components/creat_admin.vue"
import { getAdminListAPI, searchUserByAccountAPI, getUserCountByIdentityAPI, getUserListByPagerAPI } from '../../../api/userinfo'
import editAdmin from "../components/edit_admin.vue"
import reduceLevel from "../components/reduce_level.vue"
import { debounce } from 'lodash'
import { getCompanyDepartment } from '../../../api/setting'



const breadcrumb = ref()
const item = ref({
  first: '用户管理',
  second: '产品管理员'
})

const adminAccount = ref('')

const tableData = ref([])
const title = '产品管理员'



// 打开添加管理员弹窗
const addAdminRef = ref()
const goAddAdmin = (id: any) => {
  addAdminRef.value.openDialog(id)
}

// 获取管理员列表
// const getAdminList = async () => {
//   const res = await getAdminListAPI(title)
//   console.log(res)
// }
// getAdminList()

// 部门列表
const departmentList = ref()

const getDepartmentList = async () => {
  const res = await getCompanyDepartment()
  departmentList.value = Array.from(JSON.parse(res.data.data))
}
getDepartmentList()


// 编辑管理员信息
const editAdminRef = ref()

const goEditAdmin = (account, id) => {

  editAdminRef.value.openDialog(account, id, title)

}

// 删除管理员 --- 降为用户
const reduceLevelRef = ref()

const goReduceLevel = (id) => {
  reduceLevelRef.value.openDialog(id, title)
}

// 分页数据
const paginationData = reactive({
  currentPage: 1,
  pageSize: 5,
  pagerCount: 3
})

const totalData = ref()

// 获取管理员总数
const getAdminCount = async () => {
  const res = await getUserCountByIdentityAPI(title)
  totalData.value = res.data.data
}
getAdminCount()

// 获取第一页数据
const getFirstPage = async () => {
  paginationData.currentPage = 1
  const res = await getUserListByPagerAPI({ identity: title, pager: 1 })
  tableData.value = res.data.data
  adminAccount.value = ''

}

getFirstPage()

// 换页
const goChangePage = async (page) => {
  paginationData.currentPage = page
  const res = await getUserListByPagerAPI({ identity: title, pager: paginationData.currentPage })
  tableData.value = res.data.data
}

// 表的索引
const indexMethod = (index) => {
  return index + (paginationData.currentPage - 1) * 5 + 1
}

// 根据账号搜索用户 --- 表单输入 利用 debounce 防抖
const goSearch = debounce(async (adminAccount) => {

  const res = await searchUserByAccountAPI({ account: adminAccount, identity: title })
  tableData.value = res.data.data
  if (adminAccount == '') {
    getFirstPage()
  }
}, 500)


</script>

<style lang="scss" scoped>
.table-wrapped {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .table-header {
    display: flex;

    .search-wrapped {
      flex: 1;
      align-self: center;
    }

    .button-wrapped {
      text-align: right;
      margin: 25px;
    }
  }

  .table-footer {
    margin-top: 40px;
    text-align: right;
  }
}
</style>